<template>
	<view class="">
		<scroll-view scroll-x="true" class="pt-30  "  enable-flex>
			<view class="d-flex ">
				<navigator
					:url="'/pages/prot_details/prot_details?cid='+item.id"
					hover-class="hover-class"  
					class="commodity d-flex flex-d jfy-sb" 
					:class="[index?'ml-20':'ml-30',]" 
					v-for="(item,index) in comData" :key='item.id'>
					<view class="position-r">
						<text class="discount" v-if="item.flag && item.flag>0">{{item.flag}}折</text>
						<image :src="item.logo" mode="aspectFill"></image>
					</view>
					<text class="text-overflow2 font-28 mt-10 font-w">{{item.title}}</text>
					<view class="d-flex-yCenter-sb flex-w font-28 mt-10">
						<view class="d-flex-yCenter">
							<text class="Price-color">￥{{item.price_selling}}</text>
							<text class="text-decoration ml-10">￥{{item.price_market}}</text>
						</view>
						<text class="Price-color" v-if="item.price_rate1>0">赚￥{{item.price_rate1}}</text>
					</view>
				</navigator>
			</view>
		</scroll-view>
		<!-- <view class="mx-30 scroll-box">
			<text class="scroll-view"></text>
		</view> -->
	</view>
</template>

<script>
	import {
		http_mall_goods_lst
	} from '@/config/apiRouter.js'
	export default {
		name:'x-commodity-list',
		props:{
			img:{
				type:String,
				default:'../../static/chanpt/wacd.webp'
			},
		},
		data(){
			return {
				comData:[]
			}
		},
		methods:{
			getGoodsData(data){
				http_mall_goods_lst({
					data:{
						page:1,
						limit:10,
						...data,
					}
				}).then(res=>{
					this.comData=res.data.data
					console.log(this.comData);
				})
			}
		}
	}
</script>

<style lang="scss">

	// .scroll-box{
	// 	position: relative;
	// 	height: 2rpx;
	// 	background: #ddd;
	// 	.scroll-view{
	// 		position: absolute;
	// 		top: 0;
	// 		display: inline-block;
	// 		width: 50%;
	// 		height: 2rpx;
	// 		background: red;
			
	// 	}
	// }
	// .scroll-box::after{
	// 	position: absolute;
	// 	top: 0;
	// 	content: '';
	// 	display: inline-block;
	// 	width: 80rpx;
	// 	height: 2rpx;
	// 	background: yellow;
	// }
	
	
	.commodity{
		width: 320rpx;
		.discount{
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			display: inline-block;
			padding: 6rpx 10rpx;
			border-radius: 8rpx;
			color: #fff;
			background: #FF890B;
		}
		image{
			width: 320rpx;
			height: 340rpx;
			border-radius: 12rpx;
		}
	}
</style>
